<template>
  <el-dialog class="xiaobu-form-dialog" v-bind="$attrs" v-on="$listeners">
    <div class="el-dialog-body-child">
      <el-form
        class="clearfix"
        ref="dialogFormRef"
        :model="dialogForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item class="all" label="用户名" prop="userName">
          <el-input
            v-model.trim="dialogForm.userName"
            clearable
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item class="all" label="手机号" prop="phoneNumber">
          <el-input
            v-model.trim="dialogForm.phoneNumber"
            clearable
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item class="all" label="邮箱" prop="email">
          <el-input
            v-model.trim="dialogForm.email"
            clearable
            placeholder="请输入邮箱"
          />
        </el-form-item>
        <el-form-item class="all" label="邮箱验证码" prop="emailCode">
          <vue-message-code class="get-code" beginMsg="获取邮箱验证码" :getCodeApi="getCodeApi" :validateForm="validateForm"></vue-message-code>
          <el-input :maxlength="6" v-model.trim="dialogForm.emailCode" placeholder="请输入邮箱验证码" />
        </el-form-item>
        <el-form-item class="all" label="注册凭证" prop="authCode">
          <div class="box flex-c-s">
            <el-input
            v-model.trim="dialogForm.authCode"
            clearable
            placeholder="请输入注册凭证"
          />
            <el-tooltip
              class="item"
              effect="dark"
              content="关注微信公众号【爆米花小布】，发送消息“注册凭证”获取注册凭证！"
              placement="top"
            >
              <i class="tips-icon el-icon-question"></i>
            </el-tooltip>
          </div>
        </el-form-item>
      </el-form>
      <div class="flex-c-c">
        <el-tag type="warning">温馨提示：注册后将使用手机号进行登录，默认密码为 【888888】</el-tag>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <template>
        <el-button @click="$emit('close')">关 闭</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </template>
    </div>
  </el-dialog>
</template>
<script>
import {commonApi} from "@/api"
import { emailReg, mobileReg } from "@/utils/check-reg.js"
export default {
  name: "EditUserInfo",
  data() {
    return {
      dialogForm: {
        userName: "",
        phoneNumber: "",
        email: "",
        emailCode: "",
        authCode: ""
      },
      rules: {
        userName: [{required: true, message: "请输入用户名", trigger: ["blur"]}],
        phoneNumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: mobileReg,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: ["blur"] },
          { pattern: emailReg, message: "请输入正确的邮箱", trigger: ["blur"] }
        ],
        emailCode: [{required: true, message: "请输入邮箱验证码", trigger: "blur"}],
        authCode: [{required: true, message: "请输入注册凭证", trigger: "blur"}]
      }
    }
  },
  methods: {
    // 重置表单
    resetDialogForm() {
      this.dialogForm = {
        userName: "",
        sex: "",
        phoneNumber: "",
        email: "",
        emailCode: "",
        authCode: ""
      },
      this.$nextTick(() => {
        this.$refs.dialogFormRef&&this.$refs.dialogFormRef.clearValidate()
      })
    },
    //校验邮箱
    validateForm() {
      return new Promise(resolve => {
        this.$refs.dialogFormRef.validateField("email", errMsg => {
          if (!errMsg) {
            resolve({ result: true, msg: "校验通过" })
          } else {
            resolve({ result: false, msg: errMsg })
          }
        })
      })
    },
    // 校验通过 获取邮箱验证码
    getCodeApi() {
      commonApi.sendEmail({email: this.dialogForm.email}).then(data => {
        this.$modal.msgSuccess(data.msg)
      })
    },
    // 注册用户
    save() {
      this.$refs.dialogFormRef.validate(async valid => {
        if (valid) {
          commonApi.register(this.dialogForm).then(data => {
            this.$emit("close")
            this.$modal.msgSuccess(data.msg)
          })
        }
      })
    }
  }
}
</script>
